<template>
  <div
    class="reporting-progress"
    :class="{ 'reporting-progress_disabled': data.state == 0 }"
  >
    <template v-if="data.state != 0">
      <div class="progress">
        <div
          class="step"
          :class="{ active: data.step == '1', over: data.step != '1' }"
        >
          <span class="step-text">审核 <span class="step-icon"></span></span>
        </div>
        <div
          class="step"
          :class="{ active: data.step == '2', over: data.step == '3' }"
        >
          <span class="step-line"></span>
          <span class="step-text">派位<span class="step-icon"></span></span>
        </div>
        <div
          class="step"
          :class="{
            active: data.step == '3' && data.schoolStatus == '0',
            over:
              data.step == '3' &&
              (data.schoolStatus == 'N' || data.schoolStatus == 'Y'),
          }"
        >
          <span class="step-line"></span>
          <span class="step-text">现场审核<span class="step-icon"></span></span>
        </div>
      </div>
      <div class="progress-info" :class="{ mt30: data.status != '3' }">
        <!-- 第一步待审核 -->
        <h3 class="title" v-if="data.step == 1 && data.auditStatus == '0'">
          {{ data.auditStatusName }}
        </h3>
        <!-- 第一步审核通过 -->
        <h3 class="title" v-if="data.step == 1 && data.auditStatus == 'Y'">
          {{ data.auditStatusName }}
        </h3>
        <!-- 第一步审核不通过 -->
        <h3 class="title" v-if="data.step == 1 && data.auditStatus == 'N'">
          <i class="el-icon-close icon_error"></i>
          {{ data.auditStatusName }}
          <el-button v-if="verify.res != -1" size="mini" @click="onSubmit"
            >确认修改</el-button
          >
        </h3>
        <p class="info" v-if="data.step == 1 && data.auditStatus == 'N'">
          {{ data.auditReason }}
        </p>
        <!-- 第二步预录取 -->
        <h3 class="title" v-if="data.step == 2">
          拟就读学校：{{ data.schoolName }}
        </h3>
        <!-- 第三步待审核 -->
        <h3 class="title" v-if="data.step == 3 && data.schoolStatus == '0'">
          拟就读学校：{{ data.schoolName }}，待现场审核
        </h3>
        <!-- 第三步现场审核通过 -->
        <h3 class="title" v-if="data.step == 3 && data.schoolStatus == 'Y'">
          录取学校：{{ data.schoolName }}
        </h3>
        <p class="info" v-if="data.step == 3 && data.schoolStatus == 'Y'">
          开学时间另行通知，请耐心等待
        </p>
        <!-- 第三步现场审核不通过 -->
        <h3 class="title" v-if="data.step == 3 && data.schoolStatus == 'N'">
          <i class="el-icon-close icon_error"></i>
          {{ data.schoolStatusName }}
        </h3>
        <p class="info" v-if="data.step == 3 && data.schoolStatus == 'N'">
          {{ data.schoolReason }}
        </p>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props: {
    data: {
      type: Object,
      default: null,
    },
    isShowBtn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    onSubmit() {
      this.$emit("_click");
    },
  },
  mounted() {},
  computed: {
    verify() {
      return this.$store.state.verify;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.reporting-progress {
  height: 200px;
  background: url(~@/assets/images/bg_steps.png) no-repeat;
}
.progress {
  height: 36px;
  line-height: 36px;
  padding-top: 20px;
  text-align: center;
  font-size: 0;
  .step {
    display: inline-block;
    font-size: 16px;
    color: #1fdaff;
    .step-text {
      position: relative;
      display: inline-block;
      margin: 0 15px 0 30px;
    }
    .step-icon {
      color: #fff;
      position: absolute;
      top: 4px;
      left: -30px;
      width: 28px;
      height: 28px;
      margin-left: 5px;
      background: url(~@/assets/images/steps_circle.png) no-repeat center;
    }
    .step-line {
      display: inline-block;
      width: 371px;
      height: 6px;
      background: url(~@/assets/images/steps_line.png) no-repeat;
    }
    &.active {
      .step-text {
        margin-left: 25px;
        color: #fff;
        font-weight: bold;
      }
      .step-line {
        display: inline-block;
        width: 371px;
        height: 6px;
        background: url(~@/assets/images/steps-line-active.png) no-repeat;
      }
      .step-icon {
        background: unset;
        margin-left: 0;
        // background: url(~@/assets/images/step_active.png) no-repeat;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background-color: #fff;
        top: 14px;
        left: -15px;
      }
    }
    &.over {
      .step-text {
        margin-left: 44px;
        color: #fff;
        font-weight: bold;
      }
      .step-line {
        display: inline-block;
        width: 371px;
        height: 6px;
        background: url(~@/assets/images/steps-line-active.png) no-repeat;
      }
      .step-icon {
        margin-left: 0;
        background: url(~@/assets/images/step_active.png) no-repeat;
      }
    }
  }
}
.progress-info {
  margin-top: 4px;
  padding: 0 100px;
  text-align: center;
  .title {
    line-height: 36px;
    color: #fff;
    font-size: 20px;
    // font-weight: normal;
    .el-button {
      margin-left: 10px;
      font-size: 16px;
      color: #409eff;
    }
    .icon_error {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-right: 10px;
      line-height: 26px;
      border-radius: 50%;
      background-color: #fff;
      color: #ff0000;
      font-weight: 700;
      font-size: 20px;
      position: relative;
      border: 3px solid;
      border-color: rgba($color: #51bdfe, $alpha: 0.7);
    }
  }
  .info {
    width: 120%;
    margin-left: -100px;
    padding: 0 20px;
    max-height: 44px;
    margin-top: 5px;
    line-height: 22px;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
